<template>
  <div class="add-clothes-container">
    <div class="page-header">
      <van-icon name="arrow-left" class="back-icon" @click="handleBack" />
      <span class="page-title">属性详情</span>
    </div>

    <div v-if="loading" class="loading-state">
      <van-loading type="spinner" />加载中...
    </div>

    <div v-else class="form-container">
      <!-- 单品图片 -->
      <div class="form-group">
        <div class="image-upload-section">
          <span>单品图片</span>
          <!-- 隐藏的文件输入框 -->
          <input
            type="file"
            ref="fileInput"
            accept="image/*"
            @change="handleImageChange"
            style="display: none"
          />
          <span style="color: #999" @click="$refs.fileInput.click()"
            >更换图片</span
          >
        </div>
        <div class="image-preview-section" @click="imagePreview">
          <img :src="form.imageUrls?.[0]" alt="衣物预览" />
        </div>
      </div>
      <!-- 备注 -->
      <div class="form-group">
        <div class="description" @click="showDescriptionPopup = true">
          {{ form.description || "备注" }}
        </div>
      </div>
      <!-- 分类 -->
      <div class="form-group">
        <van-field
          input-align="right"
          is-link
          readonly
          label="分类"
          :placeholder="form.type[1].text"
          @click="showCategoryPopup = true"
          style="padding: 0"
        />
      </div>
      <!-- 颜色 -->
      <div class="form-group">
        <van-field
          input-align="right"
          is-link
          readonly
          label="颜色"
          :placeholder="form.color"
          @click="showColorPopup = true"
          style="padding: 0"
        >
          <template #button>
            <div
              class="color-preview"
              :style="{ backgroundColor: tempColor }"
              v-if="tempColor"
            ></div>
            <div v-else style="color: #c8c9cc">请选择</div>
          </template>
        </van-field>
      </div>
      <!-- 季节 -->
      <div class="form-group season-group">
        <div>季节</div>
        <div class="season-options-row">
          <div
            v-for="season in seasons"
            :key="season"
            :class="[
              'season-option-btn',
              form.season.includes(season) ? 'selected' : '',
            ]"
            @click="toggleSeason(season)"
          >
            {{ season }}
          </div>
        </div>
      </div>
      <!-- 品牌 -->
      <div class="form-group">
        <van-field
          input-align="right"
          is-link
          readonly
          label="品牌"
          :placeholder="form.brand || '请输入'"
          @click="showBrandPopup = true"
          style="padding: 0"
        />
      </div>
      <!-- 尺码 -->
      <div
        class="form-group"
        v-if="form.type[0].text !== '鞋子' && form.type[0].text !== '配饰'"
      >
        <van-field
          input-align="right"
          is-link
          readonly
          label="尺码"
          :placeholder="form.size || '请选择'"
          @click="showSizePopup = true"
          style="padding: 0"
        />
      </div>
      <!-- 价格  购买时间 -->
      <div class="form-group price-purchase-date-group">
        <div class="form-item">
          <span>购买价格</span>
          <div class="price-input">
            <span>¥</span>
            <input
              v-model="originalValue"
              placeholder="请输入"
              type="number"
              @blur="validatePrice"
            />
          </div>
        </div>
        <div class="form-item" @click="showPurchaseDatePopup = true">
          <span>购买时间</span>
          <span class="purchase-date">{{ form.purchaseDate || "请选择" }}</span>
        </div>
      </div>
      <!-- 单品标签 -->
      <div class="form-group">
        <van-field
          input-align="right"
          is-link
          readonly
          label="单品标签"
          :placeholder="form.name || '请输入'"
          @click="showNamePopup = true"
          style="padding: 0"
        />
      </div>
    </div>

    <!-- 备注弹窗 -->
    <van-popup
      v-model:show="showDescriptionPopup"
      position="bottom"
      :round="true"
    >
      <div class="popup-header">
        <span>添加备注</span>
      </div>
      <div class="description-input">
        <van-field
          v-model="tempDescription"
          type="textarea"
          rows="4"
          placeholder="添加备注"
          style="
            background-color: #f5f5f5;
            border-radius: 10px;
            border: 1px solid #ccc;
          "
        />
      </div>
      <div class="picker-bottom">
        <div class="popup-actions">
          <div class="cancel-btn" @click="onDescriptionCancel">取消</div>
          <div class="confirm-btn" @click="onDescriptionConfirm">确认</div>
        </div>
      </div>
    </van-popup>

    <!-- 分类选择弹窗 -->
    <van-popup v-model:show="showCategoryPopup" position="bottom" :round="true">
      <van-picker
        title="选择衣物分类"
        :columns="clothesCategories"
        confirm-button-text=""
        cancel-button-text=""
        v-model="selectedCategoryIndexes"
      >
        <template #columns-bottom>
          <div class="picker-bottom">
            <div class="popup-actions">
              <div class="cancel-btn" @click="showCategoryPopup = false">
                取消
              </div>
              <div class="confirm-btn" @click="onCategoryConfirm">确认</div>
            </div>
          </div>
        </template>
      </van-picker>
    </van-popup>

    <!-- 颜色选择弹窗 -->
    <van-popup v-model:show="showColorPopup" position="bottom" :round="true">
      <div class="popup-header">
        <span>请选择颜色</span>
      </div>
      <div class="color-options">
        <div
          v-for="color in colorMap"
          :key="color.name"
          :class="['color-item', { selected: selectedColor === color.name }]"
          @click="toggleColor(color.name)"
        >
          <div
            class="color-swatch"
            :style="{ backgroundColor: color.value }"
          ></div>
          <div class="color-name">{{ color.name }}</div>
        </div>
      </div>
      <div class="picker-bottom">
        <div class="popup-actions">
          <div class="cancel-btn" @click="onColorCancel">取消</div>
          <div class="confirm-btn" @click="onColorConfirm">确认</div>
        </div>
      </div>
    </van-popup>

    <!-- 品牌选择弹窗 -->
    <van-popup v-model:show="showBrandPopup" :round="true" position="bottom">
      <div class="popup-header">
        <span>添加品牌</span>
      </div>
      <div class="description-input">
        <van-field
          v-model="tempBrand"
          placeholder="添加品牌"
          style="border-bottom: 1px solid #ccc"
        />
      </div>
      <div class="picker-bottom">
        <div class="popup-actions">
          <div class="cancel-btn" @click="onBrandCancel">取消</div>
          <div class="confirm-btn" @click="onBrandConfirm">确认</div>
        </div>
      </div>
    </van-popup>

    <!-- 尺码选择弹窗 -->
    <van-popup v-model:show="showSizePopup" :round="true" position="bottom">
      <van-picker
        title="选择尺码"
        :columns="sizes"
        confirm-button-text=""
        cancel-button-text=""
        v-model="selectedSize"
      >
        <template #columns-bottom>
          <div class="picker-bottom">
            <div class="popup-actions">
              <div class="cancel-btn" @click="showSizePopup = false">取消</div>
              <div class="confirm-btn" @click="onSizeConfirm">确认</div>
            </div>
          </div>
        </template>
      </van-picker>
    </van-popup>

    <!-- 购买时间选择弹窗 -->
    <van-popup
      v-model:show="showPurchaseDatePopup"
      :round="true"
      position="bottom"
    >
      <van-date-picker
        v-model="purchaseDate"
        title="选择购买时间"
        confirm-button-text=""
        cancel-button-text=""
        :min-date="minDate"
        visible-option-num="3"
      >
        <template #columns-bottom>
          <div class="picker-bottom">
            <div class="popup-actions">
              <div class="cancel-btn" @click="showPurchaseDatePopup = false">
                取消
              </div>
              <div class="confirm-btn" @click="onPurchaseDateConfirm">确认</div>
            </div>
          </div>
        </template>
      </van-date-picker>
    </van-popup>

    <!-- 单品标签选择弹窗 -->
    <van-popup v-model:show="showNamePopup" :round="true" position="bottom">
      <div class="popup-header">
        <span>添加标签</span>
      </div>
      <div class="description-input">
        <van-field
          v-model="tempName"
          placeholder="添加标签"
          style="border-bottom: 1px solid #ccc"
          :maxlength="10"
        />
      </div>
      <div class="picker-bottom">
        <div class="popup-actions">
          <div class="cancel-btn" @click="showNamePopup = false">取消</div>
          <div class="confirm-btn" @click="onNameConfirm">确认</div>
        </div>
      </div>
    </van-popup>

    <!-- 处理中提示 -->
    <van-overlay
      v-if="isProcessing"
      :show="true"
      class="processing-overlay"
      z-index="200"
    >
      <div class="processing-content">
        <van-loading type="spinner" size="40" color="#409eff" />
        <p>图片处理中...</p>
      </div>
    </van-overlay>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useClothesStore } from "../store/clothes";
import { showToast, showImagePreview } from "vant";
import { clothesCategories } from "../utils/clothesCategory";
import { colorMap } from "../utils/colors";

const router = useRouter();
const route = useRoute();
const clothesStore = useClothesStore();
const clothesId = ref(route.params.id);
const loading = ref(false);

// 表单数据
const form = ref({
  // 初识化表单
  name: "",
  type: [{ text: "" }, { text: "" }],
  color: "",
  season: "",
  price: null,
  brand: "",
  size: "",
  imageUrls: [],
  description: "",
  purchaseDate: "",
});
// 初始表单数据，用于比较是否有变更
const initialFormData = ref(null);
const minDate = new Date(2020, 0, 1);

// 临时变量
const selectedColor = ref("");
const tempColor = ref("");
const tempDescription = ref("");
const tempBrand = ref("");
const selectedSize = ref([]);
const originalValue = ref(null);
const purchaseDate = ref([]);
const tempName = ref("");

// 季节选择
const seasons = ["春", "夏", "秋", "冬"];
// 尺码选择 数组对象
const sizes = [
  { text: "XS", value: "XS" },
  { text: "S", value: "S" },
  { text: "M", value: "M" },
  { text: "L", value: "L" },
  { text: "XL", value: "XL" },
  { text: "2XL", value: "2XL" },
  { text: "3XL", value: "3XL" },
  { text: "4XL", value: "4XL" },
  { text: "5XL", value: "5XL" },
  { text: "6XL", value: "6XL" },
];

// 弹窗状态
const showCategoryPopup = ref(false);
const showColorPopup = ref(false);
const showDescriptionPopup = ref(false);
const showBrandPopup = ref(false);
const showSizePopup = ref(false);
const showPurchaseDatePopup = ref(false);
const showNamePopup = ref(false);
const isProcessing = ref(false);

// 选中的分类索引
const selectedCategoryIndexes = ref([]);

// 价格验证函数
const validatePrice = () => {
  // 验证价格范围
  if (originalValue.value > 80000) {
    // 恢复原始值或设为空
    originalValue.value = form.value.price;
    showToast({
      message: "购买价格最多只能设置80000元",
      position: "bottom",
      duration: 3000,
    });
  }
  if (originalValue.value <= 0) {
    originalValue.value = form.value.price;
  }
  form.value.price = originalValue.value;
};

// 移除背景图片处理函数
const removeBg = async (file) => {
  const formData = new FormData();
  formData.append("size", "auto");
  formData.append("image_file", file);
  try {
    const response = await fetch("https://api.remove.bg/v1.0/removebg", {
      method: "POST",
      headers: {
        "X-Api-Key": "LKUL75eu2ty27UHDFNkErBiA",
      },
      body: formData,
    });

    if (response.ok) {
      return await response.arrayBuffer();
    } else {
      throw new Error(`${response.status}: ${response.statusText}`);
    }
  } catch (error) {
    console.error("调用remove.bg接口失败:", error);
    throw error;
  }
};

// 图片预览
const imagePreview = () => {
  showImagePreview({
    images: [form.value.imageUrls[0]],
    showIndex: false,
  });
};

// 更换图片
const handleImageChange = async (event) => {
  const file = event.target.files[0];
  if (file) {
    // 检查文件大小（限制5MB） 限制图片类型为JPG/PNG/WebP
    const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
    if (!allowedTypes.includes(file.type)) {
      showToast({
        message: "请上传JPG/PNG/WebP格式的图片",
        position: "bottom",
        duration: 3000,
      });
      return;
    }
    // 检查文件大小（限制5MB）
    if (file.size > 5 * 1024 * 1024) {
      showToast({
        message: "文件大小不能超过5MB",
        position: "bottom",
        duration: 3000,
      });
      return;
    }

    isProcessing.value = true;

    try {
      // 先调用图片处理接口移除背景
      const processedImageData = await removeBg(file);
      // 将处理后的图片转为DataURL
      const blob = new Blob([processedImageData], { type: "image/png" });
      const reader = new FileReader();
      reader.onload = (e) => {
        form.value.imageUrls = [e.target.result];
        showToast({
          message: "图片处理完成",
          position: "bottom",
        });
      };
      reader.onerror = () => {
        console.error("FileReader读取失败");
        isProcessing.value = false;
        showToast("图片处理失败，请稍后重试");
      };
      reader.readAsDataURL(blob);
      isProcessing.value = false;
    } catch (error) {
      console.error("图片处理失败:", error);
      isProcessing.value = false;
      showToast("图片处理失败，请稍后重试");

      // 即使处理失败，也显示原图作为备用
      const reader = new FileReader();
      reader.onload = (e) => {
        form.value.imageUrls = [e.target.result];
      };
      reader.readAsDataURL(file);
    }
  }
};

// 切换颜色选择
const toggleColor = (colorName) => {
  selectedColor.value = colorName;
};

// 根据颜色名称获取颜色值
const getColorValue = (colorName) => {
  const color = colorMap.find((c) => c.name === colorName);
  tempColor.value = color ? color.value : "";
};

// 颜色选择取消
const onColorCancel = () => {
  selectedColor.value = "";
  showColorPopup.value = false;
};

// 颜色选择确认
const onColorConfirm = () => {
  form.value.color = selectedColor.value;
  showColorPopup.value = false;
  getColorValue(form.value.color);
};

// 描述选择取消
const onDescriptionCancel = () => {
  tempDescription.value = "";
  showDescriptionPopup.value = false;
};

// 描述选择确认
const onDescriptionConfirm = () => {
  form.value.description = tempDescription.value;
  showDescriptionPopup.value = false;
};

// 品牌选择取消
const onBrandCancel = () => {
  tempBrand.value = form.value.brand;
  showBrandPopup.value = false;
};

// 品牌选择确认
const onBrandConfirm = () => {
  form.value.brand = tempBrand.value;
  showBrandPopup.value = false;
};

// 尺码选择确认
const onSizeConfirm = () => {
  form.value.size = selectedSize.value[0];
  showSizePopup.value = false;
};

// 购买时间选择确认
const onPurchaseDateConfirm = () => {
  form.value.purchaseDate = purchaseDate.value.join("-");
  showPurchaseDatePopup.value = false;
};

// 标签选择确认
const onNameConfirm = () => {
  form.value.name = tempName.value;
  showNamePopup.value = false;
};

// 切换季节选择
const toggleSeason = (season) => {
  if (form.value.season.includes(season)) {
    // 如果已选中，则取消选中
    form.value.season = form.value.season.filter((s) => s !== season);
  } else {
    // 如果未选中，则添加选中
    form.value.season.push(season);
  }
};

// 分类选择确认 - 使用v-model绑定的值
const onCategoryConfirm = () => {
  if (
    Array.isArray(selectedCategoryIndexes.value) &&
    selectedCategoryIndexes.value.length > 0
  ) {
    const firstLevelValue = selectedCategoryIndexes.value[0];
    const secondLevelValue = selectedCategoryIndexes.value[1];

    try {
      // Find first level category by value
      const firstLevelCategory = clothesCategories.find(
        (cat) => cat.value === firstLevelValue
      );

      if (firstLevelCategory) {
        // If second level value is provided, find and add it
        if (secondLevelValue && firstLevelCategory.children) {
          const secondLevelCategory = firstLevelCategory.children.find(
            (child) => child.value === secondLevelValue
          );
          if (secondLevelCategory) {
            form.value.type = [
              { ...firstLevelCategory, children: undefined },
              { ...secondLevelCategory },
            ];
          }
        }
      }
    } catch (error) {
      console.error("Error finding category text by value:", error);
    }
  }
  showCategoryPopup.value = false;
};

// 加载衣物数据
const loadClothesData = async () => {
  loading.value = true;
  try {
    const clothes = await clothesStore.fetchClothesDetail(clothesId.value);
    // 赋值到对应的字段
    form.value.name = clothes.name;
    form.value.type = clothes.type;
    form.value.color = clothes.color;
    form.value.season = clothes.season;
    form.value.price = clothes.price;
    form.value.brand = clothes.brand;
    form.value.size = clothes.size;
    form.value.imageUrls = clothes.imageUrls || [];
    form.value.description = clothes.description;
    form.value.purchaseDate = clothes.purchaseDate;

    // 保存初始数据的深拷贝，用于后续比较
    initialFormData.value = JSON.parse(JSON.stringify(form.value));

    // 初始化数据 回显
    selectedCategoryIndexes.value = [
      clothes.type[0].value,
      clothes.type[1].value,
    ];
    tempDescription.value = clothes.description;
    tempBrand.value = clothes.brand;
    selectedSize.value = [clothes.size];
    originalValue.value = clothes.price;
    purchaseDate.value = clothes.purchaseDate
      ? clothes.purchaseDate.split("-")
      : [];
  } catch (error) {
    console.error("加载衣物数据失败:", error);
    showToast((error && error.message) || "加载衣物数据失败，请稍后重试");
    router.back();
  } finally {
    loading.value = false;
  }
};

// 比较表单数据是否发生变化
const isFormDataChanged = () => {
  if (!initialFormData.value) return false;

  // 深拷贝当前表单数据进行比较
  const currentFormCopy = JSON.parse(JSON.stringify(form.value));
  const initialFormCopy = JSON.parse(JSON.stringify(initialFormData.value));

  // 比较两个对象是否相等
  return JSON.stringify(currentFormCopy) !== JSON.stringify(initialFormCopy);
};

// 返回上一页
const handleBack = async () => {
  // 检查表单数据是否发生变化
  if (isFormDataChanged()) {
    try {
      // 准备提交数据
      const submitData = {
        ...form.value,
      };

      // 调用更新衣物接口
      await clothesStore.updateClothes(clothesId.value, {
        ...submitData,
      });
      showToast({
        message: "数据已保存",
        position: "bottom",
        duration: 2000,
      });
    } catch (error) {
      console.error("更新衣物失败:", error);
      showToast({
        message: "保存数据失败，请稍后重试",
        position: "bottom",
        duration: 2000,
      });
    }
  }
  // 无论数据是否变化，都允许用户返回上一页
  router.back();
};

// 页面挂载时，加载分类数据（如果需要从API获取）
onMounted(() => {
  loadClothesData();
});
</script>

<style scoped>
* {
  font-size: 16px;
}
.add-clothes-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: #f8f8f8;
}

.back-icon {
  font-size: 20px;
  color: #000000;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  margin: 0 auto;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #999;
}

.form-container {
  margin: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.image-upload-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.image-preview-section {
  margin-top: 15px;
  width: 80px;
  background-color: #f8f8f8;
}

.upload-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 500;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
}

.upload-placeholder .van-icon {
  margin-bottom: 15px;
}

.upload-placeholder p {
  color: #999;
  margin-bottom: 15px;
}

.image-preview {
  position: relative;
  display: inline-block;
}

.image-preview img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
}

.image-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
}

.form-section {
  margin-bottom: 30px;
}

.form-section h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.form-group {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-size: 14px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.tags-container {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 季节选择样式 */
.seasons-container {
  margin-top: 8px;
}

/* 场合选择横向布局 */
.occasion-options-horizontal {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  gap: 12px; /* 选项间隔 */
  padding: 10px;
  padding-bottom: 5px; /* 调整底部内边距 */
}

/* 场合选择选项 */
.occasion-option {
  border: 2px solid #e4e7ed;
  border-radius: 25px; /* 圆角边框 */
  background-color: #fff;
  color: #303133;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  white-space: nowrap;
  padding: 10px 20px;
  min-width: 90px;
  height: 42px;
  line-height: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 鼠标悬停效果 */
.occasion-option:hover {
  border-color: #409eff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.15);
}

/* 选中状态样式 */
.occasion-option-selected {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.25);
}

/* 选中状态悬停效果 */
.occasion-option-selected:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
  transform: translateY(-1px);
}

.switch-label {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
}

.form-actions {
  margin-top: 40px;
}

@media (max-width: 768px) {
  .form-container {
    margin: 20px;
  }

  .upload-area {
    padding: 20px;
  }
}
.selected-occasions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 0;
  min-height: 32px;
}

.placeholder-text {
  color: #999;
}

.occasion-popup-content {
  padding: 16px;
}

.popup-header {
  text-align: center;
  margin: 20px;
}

.popup-header span {
  color: #000;
  font-size: 16px;
  font-weight: bold;
}

.occasion-checkbox-group {
  margin-bottom: 24px;
}

/* .popup-actions {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #eee;
} */

.picker-bottom {
  padding: 15px 0 35px 0;
  width: 60%;
  margin: 0 auto;
}
.popup-actions {
  background-color: #f0f0f0;
  border-radius: 8px;
  display: flex;
  justify-content: center;
}

.cancel-btn,
.confirm-btn {
  width: 50%;
  border-radius: 8px;
  transition: all 0.3s ease;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-btn {
  color: #000000;
}

.confirm-btn {
  background-color: #000000;
  color: #f0f0f0;
}

.cancel-btn:hover,
.confirm-btn:hover {
  transition: background-color 0.3s;
}

.color-options {
  margin: 20px;
  background-color: #f0f0f0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
}

.color-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 2px 2px;
  border-radius: 20px;
  background-color: #fafafa;
  cursor: pointer;
  transition: all 0.3s;
  width: fit-content;
}

.color-item.selected {
  background-color: #e6f7ff;
}

.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.color-name {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.color-item.selected .color-name {
  color: #1890ff;
}

.color-preview {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.description {
  color: #c8c9cc;
  height: 2.8em; /* 固定为两行文字的高度 */
  line-height: 1.4em; /* 设置行高 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  display: -webkit-box; /* 设置为弹性盒 */
  -webkit-line-clamp: 2; /* 限制显示行数 */
  -webkit-box-orient: vertical; /* 设置垂直排列 */
  word-break: break-all; /* 允许在单词内换行 */
}
.description-input {
  padding: 15px;
}
.season-group {
  display: flex;
  text-align: center;
  justify-content: space-between;
}
.season-options-row {
  display: flex;
  gap: 10px;
}
.season-group div {
  text-align: center;
}
.season-option-btn {
  padding: 2px 14px;
  border-radius: 20px;
  border: 1.5px solid #c8c9cc;
  /* background-color: #f0f0f0; */
  color: #c8c9cc;
  font-size: 14px;
  text-align: center;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

.season-option-btn.selected {
  background-color: #000000;
  color: #fff;
  border: 1.5px solid #000000;
}
.price-purchase-date-group {
  display: flex;
}
.form-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.price-input {
  display: flex;
  align-items: center;
  color: #c8c9cc;
  gap: 3px;
}
.price-input input {
  color: #c8c9cc;
  width: 100%;
  border: none;
}

.price-input input::placeholder,
.purchase-date {
  color: #c8c9cc;
}
.processing-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.processing-content {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 30px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.processing-content p {
  margin-top: 15px;
  color: #666;
}
</style>
